<template>
    <div ref="body">
                <el-popover
                        ref="createValue"
                        width="900"
                        trigger="click"
                    >
                        <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">记录</h1>
                        <!-- <h1 style="margin-bottom:15px;padding:5px 0px 5px 15px;">导入计划次数:<span style="color:red;"> {{inputCount}}</span> 次</h1> -->
                        <div style="width:95%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                            <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                                <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                                <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center" sortable></el-table-column>
                                <el-table-column property="startTime" label="处理开始时间" min-width="120" align="center" sortable>
                                <template v-slot:default="scope">
                                    <div v-html="timestampToTime(scope.row.startTime,'mm-dd hh:mm')"></div>
                                </template>
                                </el-table-column>
                                <el-table-column property="endTime" label="处理结束时间" min-width="120" align="center" sortable>
                                <template v-slot:default="scope">
                                    <div v-html="timestampToTime(scope.row.endTime,'mm-dd hh:mm')"></div>
                                </template> 
                                </el-table-column>
                                <el-table-column property="consumptionTime" label="耗时" min-width="120" align="center" sortable></el-table-column>
                                <el-table-column property="proportion" label="工作时间占比" min-width="120" align="center" sortable>
                                <template v-slot:default="scope">
                                    {{scope.row.proportion+'%'}}
                                </template>
                                </el-table-column>
                            </el-table>
                        </div>
                </el-popover>
                <div style="width:95%;border:0px solid gray; margin:0 auto; padding:5px 5px 5px 15px;">
                  <div style="width:800px;border:0px solid red; z-index:9999;    position:absolute;right:60px;top:55px;">
                     <span class="demonstration">姓名</span>&nbsp;
                        <el-select v-model="worker" filterable placeholder="请选择" @change="searchGantt">
                            <el-option
                            v-for="item in workerList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>                                            
                     &nbsp;<span class="demonstration">时间</span>
                     <el-date-picker
                          v-model="workTimeList"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="searchGantt"
                          >
                     </el-date-picker>
                     <el-button type="primary" v-popover:createValue @click="queryDayVal">工作报表</el-button>
                  </div>
                  <div id="gantt" :style="{width:'100%',height:autoHeight}">

                  </div>
                </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            detailTableList:[],
            worker:sessionStorage.getItem('userId'),
            workerList:[],
            loopCount:null,
            userId:sessionStorage.getItem('userId'),
            customData:[],
            workTimeList:[],
            grid:{
                FirstDay:null,
                LastDay:null,
            },
            pickerOptions: {
                disabledDate(time) {
                    let curDate = (new Date()).getTime();
                    let three = 32 * 24 * 3600 * 1000;
                    let secondMonths = curDate - three;
                    return time.getTime() > Date.now() || time.getTime() < secondMonths;;
                }
            }, 
        }
    },
    created(){
        this.$nextTick(()=>{
            this.getNowMonthDate();
            this.getAllUserInfo();
        })
    },
    computed:{
        autoWidth(){
            return (this.$store.state.clientWidth-200);
        },
        autoHeight(){
            return (this.$store.state.clientHeight-200)+'px';
        },
    },
    methods:{
        searchGantt(val){
            let self = this;
            // self.selectUsersDzjzByDate();
            self.selectDzjzGantt();
        // console.log(self.workTimeList);
        },
        //查询系统用户所有信息
        getAllUserInfo(){
            let self = this;
            planApi.getAllUserInfo().then(res=>{
                self.workerList =  res.content;
                self.worker = self.workerList[0].id;
                self.searchGantt();
            });
        },
        queryDayVal(){
        let self = this;
        self.selectUsersDzjzByDate();
        },
        /**查询员工工作内容缔造价值 */
        selectUsersDzjzByDate(){
            let self = this;
            let date =  new Date();
            let startDate =  self.workTimeList?self.workTimeList[0]:self.grid.FirstDay;
            let endDate =  self.workTimeList?self.workTimeList[1]:self.grid.LastDay;
            planApi.selectUsersAllDzjzForDate(self.worker,self.timestampToTime(startDate,'yyyy-mm-dd'),self.timestampToTime(endDate,'yyyy-mm-dd')).then(res=>{
                self.detailTableList =   res.content.itemList;
                self.inputCount = res.content.planImportCount;
                // res.content.planImportList;
                // console.log(res.content);
            });
        },
        //根据所传参数时间进行当月第一天和最后一天的日期获取
        getNowMonthDate(date) {
            let self = this;
            let tempDate = null;
            if(date==null|| date==undefined || date===''){
                tempDate = new Date();
            }
            let  year = tempDate.getFullYear() + "";
            let month = (tempDate.getMonth() + 1) + "";
                // 本月第一天日期
                let  begin = year + "-" + month + "-01 00:00:00";
                self.grid.FirstDay = begin;
                self.workTimeList.push(new Date(begin));
                // 本月最后一天日期    
                let lastDateOfCurrentMonth = new Date(year,month,0);
                let count = lastDateOfCurrentMonth.getDate();
                let end = year + "-" + month + "-" + count + " 23:59:59";
                self.grid.LastDay =  end;
                self.workTimeList.push(new Date(end));
                //获取当天的参数
                self.loopCount =  count;
                // self.selectDzjzGantt();
        },
        drawCustom() {
                let _this = this;
                this.chartCustom = echarts.init(document.getElementById('gantt'));
                function renderItem(params, api) {
                    let categoryIndex = api.value(0);
                    let start = api.coord([api.value(1), categoryIndex]);
                    let end = api.coord([api.value(2), categoryIndex]);
                    let height = api.size([0, 1])[1] * 0.6;

                    let rectShape = echarts.graphic.clipRectByRect({
                        x: start[0],
                        y: start[1] - height / 2,
                        width: end[0] - start[0],
                        height: height
                    }, {
                        x: params.coordSys.x,
                        y: params.coordSys.y,
                        width: params.coordSys.width,
                        height: params.coordSys.height
                    });

                    return rectShape && {
                        type: 'rect',
                        shape: rectShape,
                        style: api.style()
                    };
                }
                let legendData=[],yAxisData =[],seriesData=[];


                console.log( _this.customData )
                for (let i = 0; i < _this.customData.length; i++) {

                    let item = _this.customData[i];
                    yAxisData.push(item.currentDate);
                    // legendData.push({
                    //     name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                    //     icon: 'circle'
                    // });

                    seriesData.push({
                        // name: item.isRepeat == 1 ? "时间重叠" :(item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" :"")),
                        type: "custom",
                        itemStyle: {
                                normal: {
                                color:"rgb(58, 193, 196)",
                                opacity: 0.8,
                                    }
                              }, 
                        encode: {x: [1, 2], y: 0},
                        renderItem: renderItem,
                        data: [
                            {
                                // name: item.state == 0 ? "每日任务" : (item.state == 1 ? "发放任务" : ''),
                                value: [
                                    item.currentDate,
                                    '2019-01-01 ' + item.startTimeDesc.substr(11),
                                    '2019-01-01 ' + item.endTimeDesc.substr(11),
                                    item.startTime,
                                    item.endTime,
                                    item.drawCode,
                                    item.consumptionTime,
                                    item.itemTypeDesc,
                                ]
                            }
                        ]
                    })
                }
                this.chartCustom.clear();
                this.chartCustom.setOption({
                    color: [
                        '#0796ea',
                        '#F6F6F6',
                        '#0796ea',
                    ],
                    title: {
                        text: '工作统计',
                        textStyle: {
                            color: '#000',
                            fontSize: 17,
                            fontFamily: '微软雅黑'
                        }
                    },
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {color: "#333"},
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        formatter: function (params) {
                            console.log(  params.value  )
                            return '<div style="width: 300px;">' + params.value[0] +
                                '<P>图纸:' + params.value[5]+'</P>' +
                                '<P>任务类型：' + params.value[7]+'</P>' +
                                '<P>开始时间：' + params.value[1].substr(11)+'</P>' +
                                '<P>结束时间：' + params.value[2].substr(11)+'</P>' +
                                '<P>耗时：' + params.value[6]+'</P>' +
                                // '<P>是否实时时间：'+ (params.value[6] == 0 ? '否' : (params.value[6] == 1 ? '是' : '')) +'</P>' +
                                // '<P style="width: 280px;white-space:normal; word-break:break-all;">任务名称：'+params.value[5] +'</P>' +
                                '</div>';
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            filterMode: 'weakFilter',
                            showDataShadow: true,
                            bottom: 10,
                            height: 5,
                            borderColor: 'transparent',
                            backgroundColor: '#e2e2e2',
                            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
                            handleSize: 20,
                            handleStyle: {
                                shadowBlur: 6,
                                shadowOffsetX: 1,
                                shadowOffsetY: 2,
                                shadowColor: '#aaa'
                            },
                            labelFormatter: ''
                        },
                        {
                            type: 'inside',
                            filterMode: 'weakFilter'
                        }
                    ],
                    // legend: {
                    //     left:100,
                    //     itemWidth: 14,
                    //     data:legendData
                    // },
                    grid: {left: 100, right: 40, bottom: 50,top:30},
                    xAxis: {
                        type: 'time',
                        splitLine: {show: false},
                        axisLabel: {
                            formatter: function (params) {
                                return _this.timestampToTime(params).substr(10)
                            }
                        }
                    },
                    yAxis: {
                        data: _this.unique(yAxisData)
                    },
                    series: seriesData
                });///
        },
        unique(Array) {
                    let res = [];
                    let json = {};
                    for (let i = 0; i < Array.length; i++) {
                        if (!json[Array[i]]) {
                            res.push(Array[i]);
                            json[Array[i]] = 1;
                        }
                    }
                    return res;
        },
        /**查询某个用户某个时间段的缔造价值统计甘特图 */
        selectDzjzGantt(){
            let self = this;
            debugger;
            let startDate =  self.workTimeList?self.workTimeList[0]:self.grid.FirstDay;
            let endDate =  self.workTimeList?self.workTimeList[1]:self.grid.LastDay;
            planApi.selectDzjzGantt(self.worker,self.timestampToTime(startDate,'yyyy-mm-dd'),self.timestampToTime(endDate,'yyyy-mm-dd')).then(res=>{
                self.grid.series=[];
                self.customData = res.content;       
                self.drawCustom();
            });
        },
    },
}
</script>
<style scoped>

</style>